<template>
  <el-dialog title="添加角色" v-bind="$attrs" v-on="$listeners">
    <el-form label-width="80px" size="normal" ref="rolesAddForm"
    :model="roles" 
    :rules="rules"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="roles.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="roleDesc">
        <el-input v-model="roles.roleDesc"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="$emit('update:visible', false)">取 消</el-button>
        <el-button type="primary" @click="addNewRoles()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script>
export default {
  data() {
    return {
      roles: {
        roleName: "",
        roleDesc: "",
      },
      rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        roleDesc: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
      },
    };
  },
  methods: {
    async addNewRoles() {
      await this.$refs.rolesAddForm.validate();
      let result = await this.$api.addRoles(this.roles);
      console.log(result);
      if(result=='error') return
      this.$message.success("角色添加成功");
      this.$parent.initRolesList();
      this.$emit("update:visible", false);
    },
  },
};
</script>